<template>
	<div v-if="value" class="add-modal chapter-modal">
		<div class="wraper">
			<h3>{{title}}管理</h3>
			<div class="body">
				<div class="flex ai-end">
					<div class="input-wraper">
						<input :placeholder="`请输入${title}名称`" v-model="name" />
					</div>
					<button class="c-btn gradient-primary" @click="onAdd">创建{{title}}</button>
				</div>
				<div v-if="items.length > 0" class="ctrl-wraper">
					<div class="flex jc-between ai-center item" v-for="(v, i) in items" :key="i" :data-active="currentEdit===i">
						<input v-model="v.name" @change="onItemChange($event, i)" @focus="currentEdit = i" @blur="currentEdit = -1" />
						<div class="ctrl">
							<!-- <i class="icon" title="上移">↑</i>
							<i class="icon" title="下移">↓</i> -->
							<i class="iconfont" title="编辑" @click="currentEdit = i">&#xe6ef;</i>
							<i class="iconfont" title="删除" @click="onDel(i)">&#xe6f3;</i>
						</div>
					</div>
				</div>
			</div>
			<div class="iconfont del" @click="close">&#xe6e9;</div>
		</div>
	</div>
</template>

<script>
	export default{
		props: {
			'title':{type:String},
			'value':{type:Boolean},
			'items':{type:Array}
		},
		data(){
			return{
				name: '',
				currentEdit: -1
			}
		},
		methods:{
			close(){
				this.$emit('input', false)
			},
			onItemChange(e, i){
				this.currentEdit = -1
				this.$emit('change', {e, i})
			},
			onAdd(){
				this.$emit('add', this.name)
			},
			onDel(i){
				this.$emit('delete', i)
				// this.$Confirm({
				// 	title: `确认删除 [${this.chapters[i].name}] 吗`,
				// 	content: '删除后该章节的视频会保留，仅删除该分类！',
				// 	onConfirm(){
				// 		console.log(i)
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
@import './modal.scss';
.chapter-modal{
	.input-wraper{
		flex: 1 1 auto;
		margin-right: 10px;
	}
	.c-btn{
		min-width: 80px;
		padding: 0 1.5em;
	}
	.ctrl-wraper{
		background: #f9f9f9;
		padding: 10px;
		margin-top: 20px;
		max-height: 200px;
		overflow-y: auto;
		input{
			border: 0;
			background: none;
			padding: .2em .5em;
			flex: 1 1 auto;
			margin-right: 5px;
			border-radius: 4px;
		}
		.item{
			padding: 10px 0;
			&:hover{
				color: #000;
			}
			&[data-active="true"]{
				input{
					border: solid 1px #eee;
					background: #fff;
				}
			}
		}
	}
	.ctrl{
		display: flex;
		align-items: center;
		i{
			display: inline-block;
			cursor: pointer;
			font-size: 18px;
			color: $gray;
			margin-left: 5px;
			&:hover{
				color: #000;
			}
		}
		// .icon{
		// 	margin: 0 5px;
		// 	font-size: 16px;
		// }
	}
}
</style>
